<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="hjb2722404, hjb2722404@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <title>跟随鼠标移动的箭头</title>
</head>
<body>
    <canvas id="canvas" width="500"  height="500" style="background: #cccc;"></canvas>
    <script type="text/javascript" src="utils.js"></script>
    <script type="text/javascript" src="arrow.js"></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;

            var mouse = utils.captureMouse(canvas);

            var arrow = new Arrow();

            arrow.x = centerX;
            arrow.y = centerY;

            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);

                var dx = mouse.x - arrow.x;
                var dy = mouse.y - arrow.y;

                arrow.rotation = Math.atan2(dy, dx);

                arrow.draw(context);
            })();
        }
    </script>
</body>
</html>